<template>
  <div>
    <!-- 找房 -->
    <!-- 标题 -->
    <van-nav-bar left-arrow class="search">
      <template #right>
        <van-search
          v-model="value"
          background="#1cb676"
          placeholder="请输入小区或地址"
          @search="onSearch"
        >
          <template #left>
              <van-button
                type="primary"
                to="/listsOfCities"
                color="#969799"
                plain
              >
              上海
              </van-button>
            </template>
        </van-search>
        <van-button round type="primary" size="mini" to="/findRoomMap">
          <van-icon name="location-o" color="#fff" size="25px" />
        </van-button>
      </template>
    </van-nav-bar>
    <div class="select">
      <!-- 下拉菜单 -->
      <van-dropdown-menu active-color="#1cb676">
        <van-dropdown-item v-model="value2" :options="option" title="区域" />
        <van-dropdown-item v-model="value2" :options="option" title="方式" />
        <van-dropdown-item v-model="value2" :options="option" title="租金" />

        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="包邮">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="团购">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <LookForHousingLtem
        v-for="item in list"
        :key="item.houseCode"
        :info="item"
      />
    </van-list>
  </div>
</template>

<script>
import { Toast } from 'vant'
// import axios from 'axios'
import { LookFor } from '@/api/lookfor'

export default {
  name: 'LookForHousing',
  components: {},
  data () {
    return {
      activeName: 'region',
      value1: '',
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      value2: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ]
      // params: {
      //   current: 1,
      //   sorter: ''
      // }
    }
  },
  methods: {
    onSearch (val) {
      Toast(val)
    },
    // 获取页面信息
    async onLoad () {
      const data = await LookFor()
      console.log(data)
      this.list = [...this.list, ...data.body.list]
      console.log(this.list)
      this.loading = false
    },
    // onRefresh () {
    //   // 清空列表数据
    //   this.finished = false

    //   // 重新加载数据
    //   // 将 loading 设置为 true，表示处于加载状态
    //   this.loading = true
    //   this.onLoad()
    // },
    // 下拉菜单
    onConfirm () {
      this.$refs.item.toggle()
    },

    toDetail (id) {
      // 使用编程式导航跳转页面
      this.$router.push({
        name: 'content',
        query: {
          id
        }
      })
    }
  },

  // 在created钩子中发起请求
  async created () {
    const { data } = await LookFor()

    // 让data中的info接收data中的数据
    // console.log(data)

    this.info = data
  }
}
</script>

<style scoped lang="less">
.search {
  width: 375px;
  background-color: #1cb676;
  .van-nav-bar__right {
    display: flex;
    justify-content: space-between;
    width: 375px;
    margin: 0, 10px;
    .van-search {
      width: 300px;
      margin-left: 10px;
      .van-button--primary {
        height: 35px;
        width: 50px;
        border-width: 0;
      }
    }
    .van-button--primary {
      background: transparent;
      border-width: 0;
    }
  }
}
.van-search {
  padding: 0;
  .van-button {
    height: 33px;
    width: 20px;
  }
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
.select {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: #fff;
}
.van-dropdown-menu {
  width: 100%;
}
</style>
